<template>
	<view>
		<uni-row class="page-top" :style="{top:showMenu?'0':'-14vw'}">
			<uni-col :span="7">
				<img @click.stop="handleShowSetPopup" src="@/static/icon/set.png" v-if="!info.params.set" />
			</uni-col>
			<uni-col :span="7" style="">
				<img @click.stop="handleShowMenuPopup" src="@/static/icon/menu.png" v-if="!info.params.menu" />
			</uni-col>

			<uni-col :span="7" style="flex-direction:inherit;">
				<span @click.stop="handlePlayAll" :style="{
						color:playAllStatus?'#fd7a3c':''}">{{ playAllStatus ? playTypeText.playing : playTypeText.play }}</span>
				<img @click.stop="handlePlayAll" v-if="playAllStatus" src="@/static/icon/stop.png" />
				<img @click.stop="handlePlayAll" v-else src="@/static/icon/play.png" />

			</uni-col>
		</uni-row>

		<view class="page-bottom" :style="{bottom:showMenu?'0':'-40vw'}">
			<v-tabs v-model="currentPageId" @change="handleChangeMiniPage" height="14vw" :lineScale="1" field="thumbUrl"
				:tabs="info.pages" :pills="true" paddingItem="0 .6vw" pillsBorderRadius="0.5333vw"
				pillsColor="#007aff"></v-tabs>
		</view>


		<div class="swiper mySwiper">
			<div class="swiper-wrapper">
				<div class="swiper-slide" v-for="(item,id) in info.pages" :key="id">
					<view class="page-content" @click="handleShowMenu" :style="pageStyle">
						<!--卡片切换-->
						<!--            <view v-if="isCard" class="page-item page-card" :id="'pageItem_'+id" >-->
						<!--              <div v-if="item.imageUrl && item.answerUrl" @click.stop="handleToggleCard(item,id)">-->
						<!--                <img width="100%" :src="item.imageUrl"/>-->
						<!--              </div>-->
						<!--              <div v-if="item.imageUrl && item.answerUrl" @click.stop="handleToggleCard(item,id)">-->
						<!--                <img :src="item.answerUrl" width="100%" />-->
						<!--              </div>-->
						<!--              <view v-else class="emptyPageImg">{{item.groupName}}<view>页面名称：{{item.name}}</view>页面ID：{{id+1}}</view>-->
						<!--            </view>-->
						<!--节点展示-->
						<view class="page-item">
							<view v-if="!isBkPlayType" @click.stop="handlePlayItemAudio(node,i,id)"
								v-for="(node,i) in item.alreadyNodes" :key='i' class="area-item" :class="{
                                'show-area':set.box || currentPageItemId === getNodeId(id,i),
                                'area-blink':currentPageId === id && !set.box,
                                }" :id="'pageNode_'+id+'_'+i" :data-hasMaks="hasMask.indexOf(getNodeId(id,i))"
								:style="node.style">
								<img v-show="hasMask.indexOf(getNodeId(id,i)) === -1 && item.answerUrl && node.type === 1"
									:style="node.maskStyle" loading="lazy" :src="item.answerUrl" alt="">
							</view>
							<img v-if="item.imageUrl" :id="'pageItem_'+id" width="100%" loading="lazy"
								:src="item.imageUrl" alt="">
							<view v-else class="emptyPageImg">{{ item.groupName }}
								<view>页面名称：{{ item.name }}</view>
								页面ID：{{ id + 1 }}
							</view>
							<view class="play-icon" :style="item.playStyle">
								<uni-icons type="sound-filled" size="0.8rem" color="white"></uni-icons>
							</view>
						</view>
					</view>

				</div>
				<div v-if="loadingPage"
					style="background-color: #fff;z-index: 999;position: absolute;width:100vw;height:100vh;top:0;left:0;">
				</div>
			</div>
		</div>


		<uni-popup ref="menuPopup" type="bottom">
			<view class="menu-popup">
				<img style="position: absolute;top:0;left:0;z-index: 0;" src="@/static/icon/bg.png" width="100%" />
				<uni-row>
					<uni-col :span="12" style="padding-top: 1rem;" class="row-left">目录</uni-col>
					<uni-col :span="12" style="padding-top: 1rem;padding-right: 1rem" class="row-right">
						<view @click="handleCloseMenuPopup" class="popup-close">
							<uni-icons type="closeempty"></uni-icons>
						</view>
					</uni-col>
				</uni-row>
				<view class="menu-book-name">
					<img src="@/static/icon/menu.png" />
					<text>{{ info.bookName }}</text>
				</view>
				<div style="height:40vh;overflow: hidden auto;">
					<view class="" @click="handleChooseMenu(id)" v-for="(item,id) in info.pages" :key="id">
						<uni-row style="margin: auto;margin-bottom: 0.5rem;" class="menu-p-item">
							<uni-col :span="12" class="row-left" style="color:#597cf2;">{{ item.title }}</uni-col>
							<uni-col :span="12" class="row-right"
								style="color:#75808a;font-size:.8rem;padding-right: 1rem">
								第{{ id + 1 }}页
							</uni-col>
						</uni-row>
					</view>
				</div>
			</view>
		</uni-popup>

		<uni-popup ref="setPopup" type="bottom">
			<view class="set-popup">
				<uni-row>
					<uni-col :span="12" class="row-left" style="padding-top: 1rem;">设置</uni-col>
					<uni-col :span="12" class="row-right" style="padding-top: 1rem;padding-right: 1rem;">
						<view @click="handleCloseSetPopup" class="popup-close">
							<uni-icons type="closeempty"></uni-icons>
						</view>

					</uni-col>
				</uni-row>
				<!-- <uni-row style="margin:1rem auto;" class="menu-p-item" >
          <uni-col :span="12" class="row-left" >显示中文翻译</uni-col>
          <uni-col :span="12" class="row-right" style="padding-right: 1rem">
            <evan-switch v-model="set.zh" @change="handleChangeSetZh"/>
          </uni-col>
        </uni-row> -->
				<uni-row style="margin:1rem auto;" class="menu-p-item" v-if="!!info.params.mask">
					<uni-col :span="12" class="row-left">显示点读框</uni-col>
					<uni-col :span="12" class="row-right" style="padding-right: 1rem">
						<evan-switch v-model="set.box" @change="handleChangeSetBox" />
					</uni-col>
				</uni-row>
				<uni-row style="margin:1rem auto;" class="menu-p-item">
					<uni-col :span="24" class="row-left">
						<!-- 显示中文翻译
            <uni-row >
              <uni-col style="position: relative;" :style="{'margin-left':idx===0?'6.5vw':''}" :span="4" v-for="(item,idx) in audioSpeedList" :key="idx" :class="item.value<= set.speed?'slider-active':''">
                <div v-if="idx > 0" class="slider-line"></div>
                <div @click.stop="handleChangeSetSpeed(item.value)" class="slider-dot" :class="set.speed === item.value?'current':''"><div></div></div>
              </uni-col>
            </uni-row> -->
						<uni-row>
							<uni-col style="position: relative;" :style="{'margin-left':idx===0?'6.5vw':''}" :span="4"
								v-for="(item,idx) in audioSpeedList" :key="idx">
								<div @click="handleChangeSetSpeed(item.value)" class="slider-text"
									:class="set.speed === item.value?'current':''">{{ item.label }}
								</div>
							</uni-col>
						</uni-row>
					</uni-col>
				</uni-row>
			</view>
		</uni-popup>
		<audio style="display: none;" @ended="handlePlayEnded" id="audio"></audio>
		<audio v-if="isBkPlayType" style="display: none;" autoplay="true" preload="auto" loop="loop"
			:src="info.params.audioUrl" id="audioBg"></audio>
		<uni-popup ref="videoPopup" type="top" @change="handleShowVideo">
			<video style="width: 100%;" id="video" ref="video" preload="auto" @ended="handlePlayEnded" fill controls>
			</video>
		</uni-popup>
		<view class="logo-text">©️百杰胜文化技术支持</view>
	</view>
</template>

<script>
	import SwiperJs from '@/utils/swiper/swiper-bundle.min.js'
	import '@/utils/swiper/swiper-bundle.min.css'

	export default {
		props: ['info'],
		watch: {
			info() {
				console.log(this.info);
			}
		},
		data() {
			return {
				size: '2rem',
				bookName: '',
				showMenu: true,
				playStyle: {},
				pageStyle: {},
				currentAudioSrc: '',
				playAllStatus: false,
				currentPageId: -1,
				currentPageItemId: '',
				swiper: null,
				playTypeText: {
					playing: '播放中',
					play: '播放'
				},
				playTypeTextList: [{
					playing: '播放中',
					play: '播放'
				}, {
					playing: '连播中',
					play: '连播'
				}],
				set: {
					zh: false,
					box: false,
					speed: 1,
				},
				isVideo: false,
				audioAlready: false,
				isBkPlayType: false,
				videoPopupShow: false,
				audioSpeedList: [{
						label: '慢',
						value: 0.5
					},
					{
						label: '稍慢',
						value: 0.75
					},
					{
						label: '正常',
						value: 1
					},
					{
						label: '稍快',
						value: 1.25
					},
					{
						label: '快',
						value: 1.5
					},
				],
				hasMask: [],
				pageTop: 0,
				loadingPage: true,
				isCard: false,
			}
		},
		onLoad() {
			if (this.getAgent().isPc) {
				uni.onWindowResize(res => {
					this.setPageStyle(res.size.windowWidth, res.size.windowHeight)
					var b = this.set.box
					this.set.box = false
					setTimeout(() => {
						this.initPageList()
						this.set.box = b
						var ids = this.getCurrentNodeId()
						if (ids) {
							this.setPlayStyle(this.info.pages[ids[0]].alreadyNodes[ids[1]], ids[0])
						}
					}, 300)
				})
			} else {
				window.addEventListener('orientationchange', (event) => {
					this.setPageStyle(event.currentTarget.innerWidth, event.currentTarget.innerHeight)
					var b = this.set.box
					this.set.box = false
					setTimeout(() => {
						this.initPageList()
						this.set.box = b
						var ids = this.getCurrentNodeId()
						if (ids) {
							this.setPlayStyle(this.info.pages[ids[0]].alreadyNodes[ids[1]], ids[0])
						}
					}, 300)
				})
			}
		},

		mounted() {
			let _this = this;
			this.currentPageId = this.info.pageId
			this.playTypeText = this.playTypeTextList[this.info.params.playType]
			this.isBkPlayType = !this.info.params.playType
			this.isCard = !!this.info.params.isCard
			setTimeout(() => {
				this.setPageStyle(window.screen.width, window.screen.height)
				setTimeout(() => {
					this.initPageList()
					this.swiper = new SwiperJs(".mySwiper", {
						initialSlide: this.currentPageId,
						lazy: true,
						on: {
							slideChangeTransitionEnd: (s) => {
								let OId = this.currentPageId
								this.currentPageId = parseInt(s.activeIndex)
								this.handleStopAudio(OId)
								this.hasMask = []
							}
						}
					});

				}, 200)
			}, 200)
			window.document.querySelector('#audio audio').addEventListener('error', e => {
				if (this.audioAlready) {
					uni.showToast({
						title: "音频加载失败......请刷新页面",
						icon: "error",
						duration: 10000
					})
				}
			})
			if (this.isBkPlayType) {
				setTimeout(() => {
					const bgAudio = window.document.querySelector('#audioBg audio'),
						playAudio = () => {
							bgAudio.play()
							document.removeEventListener('touchstart', playAudio, false)
						};
					bgAudio.play()
					bgAudio.addEventListener('canplay', () => {
						this.playAllStatus = true
					}, false)
					document.addEventListener('WeixinJSBridgeReady', () => {
						playAudio()
					}, false)
					document.addEventListener('YixinJSBridgeReady', () => {
						playAudio()
					}, false)
					document.addEventListener('touchstart', playAudio, false)
				}, 300)
			}


		},
		methods: {
			handleShowSetPopup() {
				this.$refs.setPopup.open()
			},
			handleCloseSetPopup() {
				this.$refs.setPopup.close()
			},
			handleShowMenuPopup() {
				this.$refs.menuPopup.open()
			},
			handleCloseMenuPopup() {
				this.$refs.menuPopup.close()
			},
			handlePlayAll(e) {
				this.playAllStatus = !this.playAllStatus
				if (this.isBkPlayType) {
					if (this.playAllStatus) {
						window.document.querySelector('#audioBg audio').play()
					} else {
						window.document.querySelector('#audioBg audio').pause()
					}
				} else {
					if (this.playAllStatus) {
						let ids = this.getCurrentNodeId(),
							pageId = this.currentPageId,
							nodeId = 0;
						if (ids) {
							pageId = ids[0]
							nodeId = ids[1]
						}
						this.playItemAudio(this.info.pages[pageId].alreadyNodes[nodeId], nodeId, pageId)
					} else {
						this.handleStopAudio(this.currentPageId)
					}
				}
			},


			handlePlayEnded() {
				if (this.playAllStatus && !this.isBkPlayType) {
					let ids = this.getCurrentNodeId(),
						pageId = this.currentPageId,
						nodeId = 0;
					if (ids) {
						pageId = ids[0]
						nodeId = ids[1]
					}
					nodeId += 1
					let nextPage = false;
					if (this.info.pages[pageId].alreadyNodes.length <= nodeId) {
						pageId += 1
						nodeId = 0
						nextPage = true;
					}

					if (this.info.pages.length <= pageId) {
						if (this.isVideo) {
							this.$refs.videoPopup.close()
						}
						return;
					}
					if (nextPage) {
						this.currentPageId = pageId
						this.handleSweiper(pageId)
						this.hasMask = []
					}
					setTimeout(() => {
						this.playItemAudio(this.info.pages[pageId].alreadyNodes[nodeId], nodeId, pageId)
					}, 300)
				}
			},
			handleSweiper(pageId) {
				this.swiper.slideTo(pageId, 300, false)
				this.hasMask = []
			},

			handleShowMenu(e) {
				this.showMenu = !this.showMenu
			},
			handleChangeMiniPage(id) {
				this.handleSweiper(id)
				this.handleStopAudio(id)
			},
			handleChooseMenu(id) {
				this.handleCloseMenuPopup()
				setTimeout(() => {
					let oId = this.currentPageId
					this.currentPageId = id
					this.handleSweiper(id)
					this.handleStopAudio(oId)
				}, 300)
			},

			handleChangeSetZh(val) {

			},
			handleChangeSetBox(val) {

			},
			handleChangeSetSpeed(val) {
				this.set.speed = val
				let audio = window.document.querySelector('#audio audio')
				audio.playbackRate = this.set.speed
			},
			handleToggleCard(page, pageId) {
				const p = document.querySelector('#pageItem_' + pageId);
				// const show = p.classList.contains('change')
				p.classList.toggle('change')
				const node = page.alreadyNodes[0]
				if (node && node.src) {
					this.playItemAudio(node, 0, pageId, false)
					this.playAllStatus = false;
				}
			},
			handlePlayItemAudio(node, nodeId, pageId) {
				if (node.type === 1) {
					this.currentPageItemId = this.getNodeId(pageId, nodeId)
					const show = this.swtichMask(pageId, nodeId, true)
					if (!node.src || !show) {
						this.info.pages[pageId].playStyle = {}
						return;
					}
				}
				this.playItemAudio(node, nodeId, pageId, true)
				this.playAllStatus = false;
			},
			swtichMask(pageId, nodeId, swtich) {
				const id = this.getNodeId(pageId, nodeId)
				const idx = this.hasMask.indexOf(id)
				if (idx === -1) {
					this.hasMask.push(id)
					return true
				} else {
					if (swtich === true) {
						this.hasMask.splice(idx, 1)
						return false
					}
					return true
				}
			},
			playItemAudio(node, nodeId, pageId, hasMask) {
				if (!node) {
					this.playAllStatus = false
					return;
				}
				this.currentPageItemId = this.getNodeId(pageId, nodeId)
				if (node.type === 1) {
					if (hasMask !== true) {
						this.swtichMask(pageId, nodeId, false)
					}
					if (!node.src) {
						setTimeout(this.handlePlayEnded, 1000)
						return;
					}
				}
				this.setPlayStyle(node, pageId)
				this.handlePlayAudio(node.src)
			},
			handlePlayAudio(src) {
				this.audioAlready = true
				this.isVideo = !/mp3/.test(src)
				if (this.isVideo) {
					let audio = window.document.querySelector('#audio audio')
					audio.pause();
					this.handlePlayVideo(src)
				} else {
					this.$refs.videoPopup.close()
					let audio = window.document.querySelector('#audio audio')
					audio.src = src
					audio.playbackRate = this.set.speed
					audio.load()
					audio.play()
				}
			},
			handlePlayVideo(src) {
				const init = () => {
					var video = document.querySelector("#video .uni-video-video");
					video.src = src
					video.addEventListener('loadedmetadata', e => {
						uni.hideLoading()
					})
					video.addEventListener('canplay', e => {
						video.play();
						this.$refs.video.playbackRate(this.set.speed)
					})
					video.addEventListener('error', e => {
						console.log(e)
						uni.hideLoading()
						this.$refs.videoPopup.close()
						uni.showToast({
							title: "视频加载失败......请刷新页面",
							icon: "error",
							duration: 10000
						})

					})
					video.addEventListener('loadstart', (e) => {
						uni.showLoading({
							title: '视频加载中',
							mask: true
						})
					})
				}
				if (this.videoPopupShow) {
					init()
				} else {
					this.$refs.videoPopup.open()
					setTimeout(init, 300)
				}

			},

			handleStopAudio(pageId) {
				if (this.info.pages[pageId]) {
					this.info.pages[pageId].playStyle = {}
				}
				if (!this.isBkPlayType) this.playAllStatus = false
				this.currentPageItemId = ''
				if (this.isVideo) {
					this.$refs.videoPopup.close()
				} else {
					let audio = window.document.querySelector('#audio audio')
					audio.pause();
				}
			},

			handleShowVideo(e) {
				this.videoPopupShow = e.show
			},


			setPageStyle(width, height) {
				let img = window.document.querySelector('.page-item img')
				if (img) {
					const root = document.documentElement;
					root.style.setProperty('--imgHeight', img.offsetHeight + 'px');
				}

				if (width > height && img) {
					this.pageStyle = {
						width: (height / img.offsetHeight) * img.offsetWidth + 'px',
						height: height + 'px',
					}
					if (this.$refs.setPopup) {
						this.$refs.setPopup.close()
					}
					if (this.$refs.menuPopup) {
						this.$refs.menuPopup.close()
					}
				} else {
					this.pageStyle = {}
				}
			},
			initPageList() {
				this.loadingPage = true
				let cw = window.document.querySelector('.page-content').offsetWidth,
					r = 0
				const list = []
				const app = this
				this.info.pages.forEach((row, idx) => {
					row.alreadyNodes = []
					row?.nodes.forEach((node, i) => {
						r = cw / row.width
						row.alreadyNodes.push({
							type: node.type,
							maskStyle: this.getNodeMaskStyle(node, r),
							style: this.getNodeStyle(node, r),
							src: node.src
						})
					})
					list.push(row)
				})
				this.info.pages = list
				setTimeout(() => {
					this.loadingPage = false
				}, 100)
			},
			getNodeId(pageId, nodeId) {
				return pageId + '_' + nodeId
			},
			getCurrentNodeId() {
				if (this.currentPageItemId) {
					return this.currentPageItemId.split('_').map((v) => {
						return parseInt(v)
					})
				} else {
					return false;
				}
			},
			getNodeStyle(node, r) {
				return {
					top: (node.y1 * r) + 'px',
					left: (node.x1 * r) + 'px',
					width: ((node.x2 - node.x1) * r) + 'px',
					height: ((node.y2 - node.y1) * r) + 'px',
				}
			},
			getNodeMaskStyle(node, r) {
				if (node.type !== 1) return {}
				return {
					top: '-' + ((node.y1 * r) + 2) + 'px',
					left: '-' + ((node.x1 * r) + 2) + 'px',
				}
			},
			getNum(v) {
				return typeof v === 'string' ? parseInt(v.replace('px', '')) : 0
			},

			setPlayStyle(node, pageId) {
				var s = 6.4
				this.info.pages[pageId].playStyle = {
					left: (this.getNum(node.style.left) + this.getNum(node.style.width) - s) + 'px',
					top: (this.getNum(node.style.top) - s) + 'px'
				}
			},
			getAgent() {
				var ua = navigator.userAgent,
					isWindowsPhone = /(?:Windows Phone)/.test(ua),
					isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
					isAndroid = /(?:Android)/.test(ua),
					isFireFox = /(?:Firefox)/.test(ua),
					isChrome = /(?:Chrome|CriOS)/.test(ua),
					isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox &&
						/(?:Tablet)/.test(ua)),
					isPhone = /(?:iPhone)/.test(ua) && !isTablet,
					isPc = !isPhone && !isAndroid && !isSymbian;
				return {
					isTablet: isTablet,
					isPhone: isPhone,
					isAndroid: isAndroid,
					isPc: isPc
				};
			}


		}
	}
</script>

<style lang="scss">
	:root {
		--imgHeight: 0px,
	}

	.content {
		z-index: 0;
	}

	.content,
	.page-top .uni-col,
	.page-top .uni-col view {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.page-content {
		height: 100vh;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		white-space: nowrap;
		margin: auto;
		transform: matrix(1, 0, 0, 1, 0, 0);

	}


	.page-item {
		position: relative;
		width: 100vw;
		min-height: 100vw;
	}

	.area-item {
		box-sizing: border-box;
		border: 2px solid transparent;
		position: absolute;
		border-radius: 5px;
		cursor: pointer;
		z-index: 400;
		overflow: hidden;
		background-size: 100vw auto;
	}

	.area-item img {
		position: absolute;
		width: 100vw;
		height: var(--imgHeight);
	}

	@-webkit-keyframes doubleBlink {
		0% {
			border-color: transparent;
		}

		50% {
			border-color: #ff1212;
		}

		100% {
			border-color: transparent;
		}
	}

	@keyframes doubleBlink {
		0% {
			border-color: transparent;
		}

		50% {
			border-color: #ff1212;
		}

		100% {
			border-color: transparent;
		}
	}

	.area-blink {
		-webkit-animation: doubleBlink 0.8s linear 0.5s 2;
		animation: doubleBlink 0.8s linear 0.5s 2;
	}

	.show-area {
		border-color: #3ca6fe;
		background: linear-gradient(0deg, rgba(60, 166, 254, 0.1), rgba(60, 166, 254, 0.1));
	}

	.area-mask {
		background: unset;
	}

	.page-top,
	.page-bottom {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		height: 13.067vw;
		width: 100vw;
		transition: all 0.3s;
		display: flex;
		justify-content: space-between;
	}

	.page-top img {
		width: 7.5vw;
		cursor: pointer;
	}

	.page-top span {
		color: rgba(21, 27, 55, 0.65);
		display: inline-block;
		padding-right: 3px;
		cursor: pointer;
		font-size: 0.8rem;
		width: 3rem;
		text-align: right;
	}

	.play-icon {
		position: absolute;
		top: -100vh;
		left: -100vw;
		z-index: 510;
		padding: 0.1rem 0.1rem;
		text-align: center;
		background-color: #fd7a3c;
		border-radius: 50%;
		height: 0.8rem;
		line-height: 0.7rem;
	}

	.page-bottom {
		top: unset;
		bottom: 0px;
		height: 15vw;
		padding: 2vw 0vw;
		box-shadow: 0px -4px 8px #dbdbdb;
		background-color: #fff;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
	}

	.swiper {
		height: 100vh;
	}

	.swiper-item {
		display: block;
		width: 100px;
		height: 100vh;
		text-align: center;
	}

	.menu-popup,
	.set-popup {
		width: 90.4667vw;
		height: 60vh;
		position: absolute;
		bottom: 4.2667vw;
		left: 4.2667vw;
		background: linear-gradient(180deg, #f1f4ff 0%, #ffffff 100%, #ffffff 100%);
		border-radius: 2.1333vw;
	}

	.set-popup {
		height: 40vh;
	}

	.row-left {
		text-indent: 1rem;
		font-weight: bold;
	}

	.row-right {
		text-align: right;
		position: relative;
	}

	.popup-close {
		position: absolute;
		right: 1rem;
		z-index: 1999;
	}

	.menu-book-name {
		padding: 1rem;
		width: 100%;
		display: flex;
		font-size: 1.05rem;
		font-weight: 500;
		margin-top: 1.2rem;
	}

	.menu-book-name img {
		width: 7vw;
	}

	.menu-book-name text {
		padding-top: 0.68rem;
		padding-left: 0.7rem;
	}

	.menu-p-item {
		width: 90%;
		cursor: pointer;
		display: block;
		margin: auto;
		padding: 0.7rem 0;
		box-shadow: #dedede 0 0 3px 1px;
		background-color: white;
		border-radius: 5px;
	}

	.set-popup .menu-p-item {
		background-color: #edf1ff;
	}

	.slider-dot {
		width: 1.5rem;
		height: 1.5rem;
		display: block;
		border-radius: 50%;
		cursor: pointer;
		border: .09rem solid #7292ff;
		margin: 1rem auto;
		background-color: #fff;
		position: inherit;
		z-index: 1;
	}

	.slider-line {
		position: absolute;
		right: 50%;
		height: 0.2rem;
		background-color: #a0aee0;
		top: 1.7rem;
		width: 100%;
		z-index: 0;
	}

	.slider-active .slider-dot {
		background-color: #7292ff;
	}

	.slider-active .slider-line {
		background-color: #007aff
	}

	.slider-dot.current div {
		width: 0.7rem;
		height: 0.7rem;
		background-color: #fff;
		border-radius: 50%;
		margin: 0.39rem;
	}

	.slider-text {
		text-align: center;
		font-weight: normal;
		font-size: .8rem;
		display: block;
		text-indent: 0;
	}

	.slider-text.current {
		font-size: 1rem;
		font-weight: 500;
		color: #7292ff;
	}

	.logo-text {
		font-size: 1.2rem;
		position: absolute;
		bottom: 2rem;
		right: 2rem;
		color: #424242;
		z-index: 1;
	}

	@media only screen and (orientation: landscape) {
		.page-content {
			align-items: unset;
		}

		.page-top,
		.page-bottom {
			display: none;
		}

		.logo-text {
			font-size: .5rem;
			bottom: .7rem;
		}
	}

	.emptyPageImg {
		text-align: center;
		white-space: normal;
		word-break: break-word;
		padding: 20px;
		font-weight: bold;
		font-size: 20px;

		view {
			margin-top: 15px;
		}
	}

	.page-card {
		width: 100%;
		height: 100vh;

		.emptyPageImg {
			padding-top: 35vh;
		}

		div {
			position: absolute;
			left: 0;
			top: 0;
			backface-visibility: hidden;
			transition: all 1s;
			display: flex;
			align-items: center;
			height: 100%;

		}

		div:nth-of-type(2) {
			transform: rotateY(-180deg);
		}

		&.change {
			div:nth-of-type(1) {
				transform: rotateY(-180deg);
			}

			div:nth-of-type(2) {
				transform: rotateY(0deg);
			}
		}

	}
</style>